/** 
*流程实例
*/
<template>
    <vp-main-page @refresh="loadDataList">
        <template #search>
            <el-form label-suffix=":"  ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="handleSearch" label-width="120px">
				<vp-search-row :show-more="showMore">
                    <vp-search-col>
						<el-form-item prop="keyword">
							<template #label><vp-label-keyword/></template>
							<el-input v-model="searchForm.keyword" v-trim placeholder=""></el-input>
						</el-form-item>
					</vp-search-col>
                    <vp-search-col>
						<el-form-item  :label="$t('workflowinstance.processName')" prop="procDefKey">
                            <template #label><vp-label zh="流程名称" en="Process Name"/></template>
							<el-select v-model="searchForm.procDefKey" class="w100" clearable>
								<el-option 
                                    v-for="item in modelerList" 
                                    :key="item.key"
                                    :value="item.key" 
                                    :label="item.name"
                                />
							</el-select>
						</el-form-item>
					</vp-search-col>
                    <vp-search-col>
						<el-form-item :label="$t('workflowinstance.runTime')" prop="startTime">
                            <template #label><vp-label zh="启动时间" en="Run Time"/></template>
							<el-date-picker
								v-model="searchForm.startTime"
								type="daterange"
								start-placeholder="开始日期/Start Date"
								end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-" style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
                    <vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
                        <vp-btn-more @change="showMore = $event"/>
					</vp-search-col>
                </vp-search-row>
			</el-form>
        </template>
		<template #table>
			<vp-table ref="tableRef" :data="tableData" @sort-change="handleSortChange"   stripe border  style="width: 100%" row-key="id">
				<el-table-column  type="index" align="center" label="#">
				</el-table-column>
				<el-table-column 
                    :label="$t('workflowinstance.processName')" 
                    sortable="custom"
                    prop="ahp.proc_def_key_" 
                    width="300" 
                    show-overflow-tooltip
                >
                    <template #header><vp-label zh="流程名称" en="Process Name"/></template>
					<template #default="scope">
                        {{ scope.row.processName }}
					</template>
				</el-table-column>
                <el-table-column
                    :label="$t('workflowinstance.taskDescription')"
                    sortable="custom"
                    prop="abr.title"
                    show-overflow-tooltip
                    min-width="250"
                >
                    <template #header><vp-label zh="任务描述" en="Task Description"/></template>
                    <template #default="scope">
                        <el-link type="primary" @click="handleViewTask(scope.row)">
                            <span v-html="markTextColor(searchForm.keyword, scope.row.title)" />
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="$t('workflowinstance.startTime')"
                    sortable="custom"
                    prop="ahp.START_TIME_"
                    width="160"
                >
                    <template #header><vp-label zh="开启时间" en="Start Time"/></template>
                    <template #default="{row}">
                        {{ row.startTime }}
                    </template>
                </el-table-column>
                <el-table-column
                    :label="$t('workflowinstance.endTime')"
                    sortable="custom"
                    prop="ahp.END_TIME_"
                    width="160"
                >
                    <template #header><vp-label zh="结束时间" en="End Time"/></template>
                    <template #default="{row}">
                        {{ row.endTime }}
                    </template>
                </el-table-column>
                <el-table-column
                    :label="$t('workflowinstance.processStatus')"
                    sortable="custom"
                    prop="ahp.STATE_"
                    width="220"
                >
                    <template #header><vp-label zh="流程状态" en="Process Status"/></template>
                    <template #default="{row}">
                        {{ row.state }}
                    </template>
                </el-table-column>
                <el-table-column
                    :label="$t('workflowinstance.currentNode')"
                    prop="state"
                    min-width="250"
                >
                    <template #header><vp-label zh="当前节点" en="Current Node"/></template>
                    <template #default="{row}">
                        <p v-for="item in row.userTaskList" :key="item.id">
                            <span>{{ item.name }} [<el-link type="primary" @click="handleChangeAssignee(item)">{{ item.userName|| '请选择||Please Choose' }}</el-link>]</span>
                        </p>
                    </template>
                </el-table-column>
			</vp-table>
		</template>
        <template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
        <UserDialog ref="userDialogRef"></UserDialog>
	</vp-main-page>
</template>
<script setup lang="ts" name="systemWorkflowinstance">
import { ElMessage } from 'element-plus';
import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from "vue-router";
import { DEFAULT_PAGE } from '/@/utils/page';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';

    const UserDialog = defineAsyncComponent(() => import('/@/components/vp/user/VpUserDialog.vue'));
    const page = reactive({
		...DEFAULT_PAGE,
	})
    const searchForm = reactive({
		keyword: "",
        procDefKey: "",
        startTime: [],
	});

    const showMore = ref(false);
	const loading = ref(false);
	const tableData = ref([]);
    const modelerList = ref([]);

    const loadDataList = () => {
        loading.value = true
        request.get('/system/workflowInstance/list', {
            params: {
                ...searchForm,
                ...page,
            }
        }).then(res => {
            tableData.value = res?.data?.list || []
            page.total = res?.data?.total || 0
            page.pageNum = res?.data?.pageNum || 1
        }).finally(()=>{
            loading.value = false
        })	
    }

    const searchFormRef = ref();

    const handleSearch = ()=>{
        if(page.pageNum == 1){
            loadDataList()
        }else{
            page.pageNum = 1
        }
    }
    const handleSearchReset = ()=>{
        searchFormRef.value.resetFields();
    }
    const handleSortChange = (column: any)=>{
        page.sortColumn = column.prop;
        page.sortOrder = column.order == 'descending' ? 'desc': 'asc'
        loadDataList()
    }
    watch(()=>[page.pageNum, page.pageSize], ()=>{
        loadDataList()
    })
    onMounted(() => {
        loadDataList();
        loadModelerList();
    })

    const router = useRouter();
    const handleViewTask = (row: any) => {
        if(row.businessView){
            router.push({
                name: row.businessView,
                params: {
                    id:row.businessId
                },
            })
        }else{
            ElMessage.error("未定义的表单，请联系管理员/For forms with undefined questions, please contact the administrator");
        }
    };

    const userDialogRef = ref();
    /**
     * 管理员指定节点办理人
     * @param row 
     */
    const handleChangeAssignee = (row: any) =>{
        userDialogRef.value.handleOpen({
            type: 1, // 1、选择人员t_user 2、选择档案b_p3_001
            multi: false,    // 是否多选
            //selected: state.formData.sqrdaid, // 默认选中人员id
            callback: (data: any) => {
                if(data && data.yhid){
                    request.post('/workflow/change/assignee',{
                        taskId: row.id,
                        assignee: data.yhid,
                    }).then(()=>{
                        loadDataList()
                        ElMessage.success("操作成功/Success.");
                    }).catch(()=>{

                    })
                }
            }
        })
    }

    const loadModelerList = () => {
        request.get('/workflow/modeler/list').then(res => {
            modelerList.value = res?.data || [];
        })
    }

</script>
